<template>
	<view class="vue-calendar" :style="[{width:calendarWidth+'rpx'}]">
		<view class="vue-calendar-header">
			<view class="vue-calendar-header-icon" @click="previousMonth">
				<text class="iconfont icon-left">{{leftText}}</text>
			</view>
			<picker mode="date" fields="month" start="2021" @change="bindDateChange">
				<text class="fs-xxl">{{ year }}年{{ month }}月</text>
			</picker>
			<view class="vue-calendar-header-icons">
				
				<view class="vue-calendar-header-icon" @click="nextMonth">
					<text class="iconfont icon-right">{{rightText}}</text>
				</view>
			</view>
		</view>
		<view class="vue-calendar-content">
			<view class="vue-calendar-week">
				<view class="vue-calendar-week-item"
					:style="[{width:dayWidthComputed+'px',height:dayWidthComputed+'px'}]"
					v-for="(week,index) in weekList" :key="index">
					<text class="fs-xl vue-calendar-week-text">{{week}}</text>
				</view>
			</view>
			<view class="vue-calendar-day">
				<view class="vue-calendar-every-box"
					:style="[{width:dayWidthComputed+'px',height:dayWidthComputed+'px'}]" v-for="(item,index) in 42"
					:key="index" v-if="item-beginDay <= endDay" :class="[computedDay(`${year}-${month}-${item - beginDay}`)?'computed-day':'',
					isStartDate(`${year}-${month}-${item - beginDay}`)==='yes'?'first-date':'',
					isStartDate(`${year}-${month}-${item - beginDay}`)==='no'?'last-date':'',
					isStartDateAndEndDate(`${year}-${month}-${item - beginDay}`)?'first-date last-date':'',
					
					]" @click="clickDay(`${year}-${month}-${item - beginDay}`)">
					<view class="vue-calendar-every-day"
						:style="[{width:dayWidthComputed*.7 + 'px',height:dayWidthComputed*.7 + 'px'},{backgroundColor:isStartDateOrEndDate(`${year}-${month}-${item - beginDay}`) ?themeColor.activeBgColor:'transparent'}]"
						:class="[isStartDateOrEndDate(`${year}-${month}-${item - beginDay}`)?'vue-calendar-now-day':'']"
						v-if="item - beginDay > 0 && item-beginDay <= endDay ">
						<text class="fs-xl"
							:style="[{color:isStartDateOrEndDate(`${year}-${month}-${item - beginDay}`)?themeColor.activeTextColor:'#000'}]">{{item-beginDay}}</text>
						<view v-if="signList.includes(`${year}-${month}-${item - beginDay}`)"
							:style="[{left:signLeftComputed+'px'}]" class="vue-calendar-sign"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="submit-btn" @click="submit">
			确定
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			signList: {
				type: Array,
				default: () => []
			},
			calendarWidth: {
				type: Number,
				default: 750
			},
			// 是否多选日期
			multiple: {
				type: Boolean,
				default: false
			},
			// 是否可以点击日期（点击日期选中该日期并返回 @clickDay）
			isClick: {
				type: Boolean,
				default: false
			},
			themeColor: {
				type: Object,
				default: () => {
					return {
						activeBgColor: '#78510b',
						activeTextColor: '#fff',
					}
				}
			}
		},
		data() {
			return {
				leftText: '<',
				rightText: '>',
				weekList: ['日', '一', '二', '三', '四', '五', '六'],
				year: null,
				month: null,
				day: null,
				// 当前日期
				firstDate: null,
				// 最后选择的日期
				lastDate: null,
				sortArrNew: []
			}
		},
		mounted() {
			this.getInitDate();
		},
		methods: {
			// 初始化操作
			getInitDate() {
				const date = new Date();
				this.year = date.getFullYear();
				this.month = date.getUTCMonth() + 1 < 10 ? '0' + (date.getUTCMonth() + 1) : date.getUTCMonth() + 1
				this.day = date.getDate();
				this.firstDate = `${this.year}-${this.month}-${this.day}`
			},
			// 上个月
			previousMonth() {
				this.month = Number(this.month)
				if (this.month === 1) {
					this.month = 12
					this.year--
				} else {
					this.month = this.month - 1 < 10 ? '0' + (this.month - 1) : this.month - 1
				}
				this.$emit('changeMonth',this.year,this.month)
			},
			// 下个月
			nextMonth() {
				this.month = Number(this.month)
				if (this.month === 12) {
					this.month = 1
					this.year++
				} else {
					this.month = this.month + 1 < 10 ? '0' + (this.month + 1) : this.month + 1
				}
				this.$emit('changeMonth',this.year,this.month)
			},
			// 选择年月
			bindDateChange(e) {
				let [year, month] = e.detail.value.split('-')
				this.year = year
				this.month = month
			},
			// 计算当前日期是否在开始日期和结束日期之间
			computedDay(day) {
				if (this.firstDate && this.lastDate) {
					const firstDate = this.dateTotimestamp(this.firstDate)
					const lastDate = this.dateTotimestamp(this.lastDate)
					const dayDate = Date.parse(new Date(day))
					const sortArr = [firstDate, lastDate].sort()
					if (dayDate >= sortArr[0] && dayDate <= sortArr[1]) {
						return true
					}
				}
				return false
			},
			// 判断开始日期
			isStartDate(day) {
				let firstDate = this.dateTotimestamp(this.firstDate)
				let lastDate = this.dateTotimestamp(this.lastDate)
				const sortArr = [firstDate, lastDate].sort()
				const dayDate = Date.parse(new Date(day))
				if (dayDate === sortArr[0]) {
					return 'yes'
				} else if (dayDate === sortArr[1]) {
					return 'no'
				}
			},
			isStartDateOrEndDate(day) {
				return day === this.firstDate || day === this.lastDate
			},
			isStartDateAndEndDate(day){
				return day === this.firstDate && day === this.lastDate
			},
			// 点击日期
			clickDay(day) {
				if (this.multiple) {
					if (this.firstDate && this.lastDate) {
						this.firstDate = day
						this.lastDate = null
					} else if (this.firstDate && !this.lastDate) {
						this.lastDate = day
					} else {
						this.firstDate = day
					}
					if (this.firstDate && this.lastDate) {
						// 排下序 日期小的在前面
						let firstDate = this.firstDate
						let lastDate = this.lastDate
						const firstDateTime = this.dateTotimestamp(firstDate)
						const lastDateTime = this.dateTotimestamp(lastDate)
						const sortArr = [firstDateTime, lastDateTime].sort()
						this.sortArrNew = sortArr
						// this.$emit('multipleDay', [this.timestampToDate(sortArr[0]), this.timestampToDate(sortArr[1])])
					}
				}
				this.$emit('clickDay', day)
			},
			// 时间戳转换为正常格式
			timestampToDate(timestamp) {
				var date = new Date(timestamp)
				var Y = date.getFullYear() + '-'
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
				var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
				return Y + M + D
			},
			dateTotimestamp(date) {
				return Date.parse(new Date(date))
			},
			submit(){
				this.$emit('multipleDay', [this.timestampToDate(this.sortArrNew[0]), this.timestampToDate(this.sortArrNew[1])])
			}
		},
		computed: {
			// 计算每个日期的宽度
			dayWidthComputed() {
				return uni.upx2px(Number(this.calendarWidth) / 7)
			},
			//定位标记点中心左边偏移量
			signLeftComputed() {
				return ((this.dayWidthComputed * .7) - uni.upx2px(10)) / 2
			},
			// 每个月开始的第一天是星期几
			beginDay() {
				return new Date(this.year, this.month - 1, 1).getDay();
			},
			// 这个月一共多少天
			endDay() {
				return new Date(this.year, this.month, 0).getDate()
			}
		}
	}
</script>

<style>
	.submit-btn {
		width: 690rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 36rpx;
		background-color: #78510b;
		color: #fff;
		text-align: center;
		margin: 0 auto;
	}
	.vue-calendar {
		background-color: #fff;
	}

	.vue-calendar-header {
		padding-left: 40rpx;
		justify-content: space-between;
		align-items: center;
		display: flex;
	}

	.vue-calendar-header-icons {
		flex-direction: row;
		display: flex;
	}

	.vue-calendar-header-icon {
		width: 100rpx;
		height: 100rpx;
		justify-content: center;
		align-items: center;
		display: flex;
	}

	.vue-calendar-icon {
		font-size: 40rpx !important;
	}

	.vue-calendar-week {
		flex-direction: row;
		display: flex;
	}

	.vue-calendar-week-item {
		justify-content: center;
		align-items: center;
		display: flex;
	}

	.vue-calendar-week-text {
		color: #8C9198;
	}

	.vue-calendar-day {
		flex-direction: row;
		flex-wrap: wrap;
		display: flex;
	}

	.vue-calendar-every-box {
		justify-content: center;
		align-items: center;
		display: flex;
		margin: 6rpx 0;
	}

	.vue-calendar-every-day {
		justify-content: center;
		align-items: center;
		display: flex;
	}

	.vue-calendar-now-day {
		border-radius: 50rpx;
	}

	.vue-calendar-now-day-text {
		color: #fff;
	}

	.vue-calendar-sign {
		position: absolute;
		bottom: 0;
		width: 10rpx;
		height: 10rpx;
		border-radius: 20rpx;
		background-color: #cc0003;
	}


	.computed-day {
		background-color: #e3e3e3;
	}
	
	
	
	.first-date {
		border-top-left-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
	}

	.last-date {
		border-top-right-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
	}
	
	.last-date.first-date{
		border-radius: 50rpx !important;
	}
</style>
